
<template>

    <Collapse v-model="actives" simple>
      <Panel name="1" v-if="basicItem == true || basicItem.length > 0">
        基础组件
        <p slot="content">
          <DragItem
              :list="basicsArray"
              @generateKey="generateKey"
              @handleListPush="handleListPush"
              @start="handleStart"/>
        </p>
      </Panel>

      <Panel name="4" v-if="personalArray.length > 0 && (personalItem == true || personalItem.length > 0)">
        个性组件
        <p slot="content">
          <DragItem
              :list="personalArray"
              @generateKey="generateKey"
              @handleListPush="handleListPush"
              @start="handleStart"
          />
        </p>
      </Panel>

      <Panel v-if="customComponents.length > 0" name="2">
        自定组件
        <p slot="content">
          <DragItem
              :list="customComponents"
              @generateKey="generateKey"
              @handleListPush="handleListPush"
              @start="handleStart"
          />
        </p>
      </Panel>
      <Panel name="3" v-if="layoutItem == true || layoutItem.length > 0">
        布局组件
        <p slot="content">
          <DragItem
              :list="layoutArray"
              @generateKey="generateKey"
              @handleListPush="handleListPush"
              @start="handleStart"/>
        </p>
      </Panel>

    </Collapse>

</template>
<script>
import {basicsList, layoutList, personalList, noModelList} from '../config.js';
import DragItem from './item';

export default {
  components: {
    DragItem,
  },
  data() {
    return {
      actives: ['1'],
      noModel: noModelList,
      startType: '',
      data: {
        list: [],
        config: {
          layout: 'horizontal',
          labelCol: {span: 4},
          wrapperCol: {span: 18},
          hideRequiredMark: false,
          customStyle: '',
        },
      },
      previewOptions: {
        width: 850,
      },
      selectItem: {
        key: '',
      },
    };
  },
  props: {
    basicItem: {
      type: [Boolean, Array],
    },
    personalItem: {
      type: [Boolean, Array],
    },
    layoutItem: {
      type: [Boolean, Array],
    },
  },
  computed: {
    basicsArray() {
      if (this.basicItem == false) {
        return [];
      }
      let blist = basicsList;
      if (this.basicItem && this.basicItem instanceof Array && this.basicItem.length > 0) {
        blist = blist.filter(t => this.basicItem.indexOf(t.type) >= 0);
      }
      blist.forEach(t => {
        t.options.dynamicHide = false;
        t.options.dynamicHideValue = '';
        if (!t.key) {
          const key = t.type + '_' + new Date().getTime();
          t['key'] = key;
          t['model'] = key;
        }

      });
      return blist;
    },
    personalArray() {
      if (this.personalItem == false) {
        return [];
      }
      let blist = personalList;
      if (this.personalItem && this.personalItem instanceof Array && this.personalItem.length > 0) {
        blist = blist.filter(t => this.personalItem.indexOf(t.type) >= 0);
      }
      blist.forEach(t => {
        t.options.dynamicHide = false;
        t.options.dynamicHideValue = '';
        if (!t.key) {
          const key = t.type + '_' + new Date().getTime();
          t['key'] = key;
          t['model'] = key;
        }

      });
      return blist;
    },
    layoutArray() {
      if (this.layoutItem == false) {
        return [];
      }
      let llist = layoutList;
      if (this.layoutItem && this.layoutItem instanceof Array && this.layoutItem.length > 0) {
        llist = llist.filter(t => this.layoutItem.indexOf(t.type) >= 0);
      }
      llist.forEach(t => {
        t.options.dynamicVisible = false;
        t.options.dynamicVisibleValue = '';
        if (!t.key) {
          const key = t.type + '_' + new Date().getTime();
          t['key'] = key;
          t['model'] = key;
        }
      });
      return llist;
    },
  },
  inject: {
    customComponents: {
      from: 'customC',
      default: () => [],
    },
  },
  created() {

    if (this.customComponents && this.customComponents.length > 0) {
      this.customComponents.forEach(t => {
        if (!t.key) {
          const key = t.type + '_' + new Date().getTime();
          t['key'] = key;
          t['model'] = key;
        }
      });
    }

  },
  methods: {
    generateKey(list, index) {
      const key = list[index].type + '_' + new Date().getTime();
      this.$set(list, index, {
        ...list[index],
        key,
        model: key,
      });
      if (this.noModel.includes(list[index].type)) {
        delete list[index].model;
      }
    },
    handleListPush(item) {
      if (!this.selectItem.key) {
        const key = item.type + '_' + new Date().getTime();
        item = {
          ...item,
          key,
          model: key,
        };
        if (this.noModel.includes(item.type)) {
          delete item.model;
        }
        const itemString = JSON.stringify(item);
        const record = JSON.parse(itemString);
        delete record.icon;
        delete record.component;
        this.data.list.push(record);

        this.$emit('handleSetSelectItem', record);
        return false;
      }

    },
    handleStart(list, index) {
      this.generateKey(list, index);
      const type = list[index].type;
      this.startType = type;

    },
  },
};

</script>
